<template>
    <view>
			<view class="mask" v-if="visible" @click="closeMask">
				<view @click.stop="tap()">
					<picker-view :value="valueArray" @change="bindChange" class="picker-view">
					    <picker-view-column>
					        <view class="item" v-for="(item,index) in proviceList" :key="index">{{item}}</view>
					    </picker-view-column>
					    <picker-view-column>
					        <view class="item" v-for="(item,index) in cityList[valueArray[0]]" :key="index">{{item}}</view>
					    </picker-view-column>
					    <picker-view-column>
					        <view class="item" v-for="(item,index) in xianList" :key="index">{{item.hospital}}</view>
					    </picker-view-column>
					</picker-view>
				</view>
			</view>
    </view>
</template>
<script>
	import apis from '@/apis.js'
    export default {
			props: {
				visible: {
					type: Boolean,
					default: false,
				}
			},
        data() {
            return {
								proviceList: [],
								cityList: [],
								xianList: [],
								valueArray: [0, 0, 0],
								valueName: '请选择',
								thirdIndex: 0
            }
        },
				mounted() {
					this.getList()
				},
        methods: {
					tap() {},
					showMask() {
						this.visible = true
					},
					closeMask() {
						this.$emit('closeEvent', { visible: false,  id : this.xianList[this.thirdIndex].id, hospital: this.xianList[this.thirdIndex].hospital})
						// this.visible = false
					},
					getList() {
						this.$http.get(apis.hospitalList).then(res => {
							let data = res.data
							this.proviceList = Object.keys(data)
							this.cityList = Object.values(data)
							this.getHost(this.proviceList[0], this.cityList[0][0])
						})
					},
					getHost(prov, city) {
						this.$http.get(apis.queryHospitalByProvCity, { city: city, prov: prov }).then(res => {
							this.xianList = res.data.result
						})
					},
					bindChange (e) {
						console.log(e, '21323123')
						if (e.detail.value[0] !== this.valueArray[0]) {
							this.valueArray = [e.detail.value[0], 0, 0]
						} else {
							this.valueArray = e.detail.value
						}
						let first= this.valueArray[0]
						let second = this.valueArray[1]
						this.thirdIndex = this.valueArray[2]
						this.getHost(this.proviceList[first] , this.cityList[first][second])
					}
        }
    }
</script>
<style>
		.mask{
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}
    .picker-view {
        width: 750rpx;
        height: 600rpx;
        margin-top: 20rpx;
				background-color: #fff;
				position: absolute;
				bottom: 0;
    }
    .item {
        height: 34px;
        align-items: center;
        justify-content: center;
        text-align: center;
				line-height: 34px;
    }
</style>